.root {
  padding: var(--padding);
  max-height: 36rem;
  overflow: auto;
  box-sizing: border-box;
  width: 20rem;
  max-width: 100%;
  line-height: var(--lineHeight);
}

.header {
  border-bottom: var(--borderBottom);
  text-align: center;
  margin-bottom: 0.25rem;
}

.list {
  list-style-type: none;
  color: var(--color);
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.item {
  margin: 0;
  padding: 0;

  &:not(:last-of-type) {
    margin-bottom: var(--itemMargin);
  }

  &:not(:first-of-type) {
    border-top: var(--borderWidth) var(--borderStyle) var(--borderColor);
    padding-top: var(--itemPadding);
  }
}


.loading {
  text-align: center;
}

.closeButtonIcon {
  /* using !important to override Inst-UI rule that usually makes sense, but makes the X look too big here */
  font-size: var(--closeButtonIconSize) !important; /* stylelint-disable-line declaration-no-important */
}

.closeButtonText {
  text-transform: uppercase;
  letter-spacing: 0.0625rem;
}
